import React, { PureComponent } from 'react'
import { StyleSheet, View, Image, Text } from 'react-native'
import { createBottomTabNavigator, createAppContainer, createStackNavigator, TabBarBottom } from 'react-navigation'
import color from './widget/color'
import TabBarItem from './widget/TabBarItem'
import HomeScene from './scene/Home/HomeScene'
import MineScene from './scene/Mine/MineScene'
import NearbyScene from './scene/Nearby/NearbyScene'
import OrderScene from './scene/Order/OrderScene'
import WebScene from './scene/Web/WebScene'
class RootScene extends PureComponent<{}> {
  render () {
    return (
      <AppContainer style={{ paddingTop: 0 }} />
    );
  }
}
const Tab = createBottomTabNavigator({
  Home: {
    screen: createStackNavigator({ Home: HomeScene }),
    navigationOptions: ({ navigation }) => ({
      tabBarLabel: '团购',
      tabBarIcon: ({ focused, tintColor }) => (
        <TabBarItem
          tintColor={tintColor}
          focused={focused}
          activeImage={require('./img/tabbar/tabbar_homepage_selected.png')}
          images={require('./img/tabbar/tabbar_homepage.png')}
        />
      )
    })
  },
  Nearby: {
    screen: createStackNavigator({ Nearby: NearbyScene }),
    navigationOptions: () => ({
      tabBarLabel: '附近',
      tabBarIcon: ({ focused, tintColor }) => (
        <TabBarItem
          tintColor={tintColor}
          focused={focused}
          activeImage={require('./img/tabbar/tabbar_merchant_selected.png')}
          images={require('./img/tabbar/tabbar_merchant.png')}
        />
      )
    })
  },
  Order: {
    screen: createStackNavigator({ Order: OrderScene }),
    navigationOptions: () => ({
      tabBarLabel: '订单',
      tabBarIcon: ({ focused, tintColor }) => (
        <TabBarItem
          tintColor={tintColor}
          focused={focused}
          activeImage={require('./img/tabbar/tabbar_order_selected.png')}
          images={require('./img/tabbar/tabbar_order.png')}
        />
      )
    })
  },
  Mine: {
    screen: createStackNavigator({ Mine: MineScene }),
    navigationOptions: () => ({
      tabBarLabel: '我的',
      tabBarIcon: ({ focused, tintColor }) => (
        <TabBarItem
          tintColor={tintColor}
          focused={focused}
          activeImage={require('./img/tabbar/tabbar_mine_selected.png')}
          images={require('./img/tabbar/tabbar_mine.png')}
        />
      )
    })
  }
}, {
    tabBarComponent: TabBarBottom,  //用作标签栏的组件， 例如： TabBarBottom （这是 iOS 上的默认值）， TabBarTop（这是 Android 的默认值）
    tabBarPosition: 'bottom',       //标签栏的位置, 可以是 'top' 或 'bottom'。
    lazy: true,     //则会立即呈现所有选项卡。当 true时， 选项卡仅在活动时才呈现。
    // animationEnabled: false,  //是否在更改标签页时进行动画处理。
    // swipeEnabled: false,  //是否允许在标签页之间进行滑动
    // removeClippedSubviews: false,  //通过释放非活动选项卡使用的资源来减少内存使用的优化方案。
    // initialLayout -可选对象, 其中包含初始的 height 和 width，可以通过传递该对象，来防止 react-native-tab-view 渲染时一个帧的延迟。
    // initialRouteName -第一次加载时初始选项卡路由的 routeName。
    // order -定义选项卡顺序的 routeNames 数组。
    // paths - 提供 routeName 到 path 配置的映射, 它重写 routeConfigs 中设置的路径。
    // backBehavior - 控制 "返回" 按钮是否会导致 Tab 页切换到初始 Tab 页? 如果是, 设置为 initialRoute, 否则 none。 默认为 initialRoute的行为。
    tabBarOptions: {
      activeTintColor: color.primary,  //-活动选项卡的标签和图标颜色。
      // activeBackgroundColor: '#000000',  //活动选项卡的背景色。
      inactiveTintColor: color.gray,  //"非活动" 选项卡的标签和图标颜色。
      // inactiveBackgroundColor: '#ffffff', //非活动选项卡的背景色。
      // showLabel: true, //是否显示选项卡的标签, 默认值为 true
      // tabStyle -选项卡的样式对象。
      // allowFontScaling -无论标签字体是否应缩放以尊重文字大小可访问性设置，默认值都是 true。
      // safeAreaInset - 为 <SafeAreaView> 组件重写 forceInset prop， 默认值：{ bottom: 'always', top: 'never' }； top | bottom | left | right 的可选值有： 'always' | 'never'。
      style: { backgroundColor: '#ffffff' },
    },
  })
//隐藏导航的顶部标题栏 
Tab.navigationOptions = {
  header: null,
}
const AppNavigator = createStackNavigator({
  Tab: { screen: Tab },
  WebScene: { screen: WebScene }
}, {
    tabBarOptions: {
      style: { backgroundColor: '#000000' },
    }
  })



const AppContainer = createAppContainer(AppNavigator)




export default RootScene